<template>
  <el-dialog
    title="人员详细"
    :visible="shoWorkDialog"
    width="38%"
    @close="$emit('update:shoWorkDialog', false)"
  >
    <el-descriptions
      label-style="paddingTop:15px"
      content-style="paddingTop:15px"
    >
      <el-descriptions-item label="人员名称">{{ personDetail.userName }}</el-descriptions-item>
      <el-descriptions-item label="角色">{{ personDetail.roleName }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ personDetail.mobile }}</el-descriptions-item>
      <el-descriptions-item label="负责区域">
        {{ personDetail.regionName }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- table -->
    <el-table
      class="tables"
      border

      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      :data="tableData"
    >
      <el-table-column prop="data" align="center" />
      <el-table-column prop="total" label="总工单数" align="center" />
      <el-table-column prop="cancelCount" label="拒绝工单" align="center" />
      <el-table-column prop="workCount" label="完成工单" align="center" />
      <el-table-column prop="progressTotal" label="进行中工单" align="center" />
    </el-table>
  </el-dialog>
</template>

<script>
import { PersonDetail } from '@/api/personnel/personnel'
import { EmployeeWork } from '@/api/personnel/workload'

import { getCurrentWeekTimeRange, getMonth, getYear } from '@/utils/date'
export default {
  name: 'WorkerDetail',
  props: {
    shoWorkDialog: {
      type: Boolean
    }
  },
  data() {
    return {
      personDetail: null,
      tableData: [
        {
          data: '本周',
          progressTotal: 0, // 进行中总数
          total: 0, // 工单总数
          workCount: 0, // 完成数
          cancelCount: 0 // 拒绝工单
        },
        {
          data: '本月',
          progressTotal: 0, // 进行中总数
          total: 0, // 工单总数
          workCount: 0, // 完成数
          cancelCount: 0 // 拒绝工单
        },
        {
          data: '本年',
          progressTotal: 0, // 进行中总数
          total: 0, // 工单总数
          workCount: 0, // 完成数
          cancelCount: 0 // 拒绝工单
        }
      ],
      time: {
        userId: 0,
        start: '',
        end: ''
      },
      time2: {
        userId: 0,
        start: '',
        end: ''
      },
      time3: {
        userId: 0,
        start: '',
        end: ''
      }
    }
  },

  created() {
    const data = getCurrentWeekTimeRange()
    this.time.start = data.start
    this.time.end = data.end

    const mouth = getMonth()
    this.time2.start = mouth.start
    this.time2.end = mouth.end

    const year = getYear()
    this.time3.start = year.start
    this.time3.end = year.end
  },
  methods: {
    async  getPersonDetails(id) {
      const data = await PersonDetail(id)
      this.personDetail = data
      this.time.userId = id
      this.time2.userId = id
      this.time3.userId = id
      // 获取员工工作量
      console.log(this.time)
      const res = await EmployeeWork(this.time)
      this.tableData[0].total = res.total
      this.tableData[0].progressTotal = res.progressTotal
      this.tableData[0].workCount = res.workCount
      this.tableData[0].cancelCount = res.cancelCount

      const res2 = await EmployeeWork(this.time2)
      this.tableData[1].total = res2.total
      this.tableData[1].progressTotal = res2.progressTotal
      this.tableData[1].workCount = res2.workCount
      this.tableData[1].cancelCount = res2.cancelCount

      const res3 = await EmployeeWork(this.time3)
      this.tableData[2].total = res3.total
      this.tableData[2].progressTotal = res3.progressTotal
      this.tableData[2].workCount = res3.workCount
      this.tableData[2].cancelCount = res3.cancelCount
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-descriptions__table {
  height: 86px;
  background: #f3f6fb;
}
.tables{
  margin-top: 20px;
}

</style>
